<style scoped lang="less">
  .to-post{
    margin-top: 40px;
  }
  .posting-choose{
    padding-top: 20px;
    li{
      padding-right: 50px;
      .post-class-item{
        line-height: 32px;
        border: 2px solid #aaa;
        color: #aaa;
        font-size: 16px;
        text-align: center;
        width: 150px;
        letter-spacing: 2px;
        cursor: pointer;
      }
      .active{
        color: #0595FF;
        border-color: #0595FF;
      }
    }
  }
  .go-post-cover{
    background: rgba(0, 0, 0, 0.3);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    .cover-box{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 500px;
      height: 480px;
      background: url("../../../static/image/cover-bg.png") no-repeat;
      background-size: 100% 100%;
      text-align: center;
      .logo-box{
        padding-top: 100px;
      }
      .prompt-text{
        color: #007aff;
        padding-top: 160px;
        font-size: 16px;
        letter-spacing: 1px;
      }
      .btn{
        font-size: 18px;
        text-align: center;
        width: 120px;
        color: #fff;
        cursor: pointer;
        line-height: 36px;
        border-radius: 18px;
        background: #007aff;
        margin: 30px auto 0;
        box-shadow: none;
      }
    }
  }
</style>
<template>
  <div>
    <div>
      <div class="main-body" id="main-body">
        <div class="main-content">
          <div class="theme-box">
            <div class="left theme-nav">
              <div class="seacher-box">
                <div @click="searchTheme" class="right icon-box">
                  <img src="../../../static/image/j_11.png">
                </div>
                <div class="ipt">
                  <input @keyup.enter="searchTheme" v-model="skey" type="text" placeholder="搜索地区">
                </div>
                <div class="clear"></div>
              </div>
              <div class="topic">
                选择地区
              </div>
              <div class="nav-list">
                <ul v-if="hasTheme">
                  <li class="nav-item" v-for="(theme, index) in themeList">
                    <a @click="changeTheme(index, theme.ca_name)" :class="currentTheme === index? 'active' : ''" href="javascript: void(0)">
                      {{ theme.ca_name + '论坛' }}
                    </a>
                  </li>
                </ul>
                <div style="font-size: 18px;" v-else>
                  未搜索到该地区
                </div>
              </div>
            </div>
            <div class="right theme">
              <div>
                <Crumbs></Crumbs>
              </div>
              <div class="theme-banner">
                <div class="left img-box">
                  <img :src="themeImg">
                </div>
                <div class="info-box">
                  <p class="title">
                    {{ themeName }}
                  </p>
                  <p>
                    版主：
                    <span style="padding-right: 20px;" v-for="moderator in themeModerator">
                      {{ moderator }}
                    </span>
                  </p>
                  <p>
                    签名： {{ themeSign }}
                  </p>
                </div>
                <div class="clear"></div>
              </div>
              <div>
                <div class="post-class">
                  <div @click="toPosting" class="right to-post">
                    去发帖
                  </div>
                  <div class="post-class-list">
                    <ul>
                      <li v-for="(className, index) in classList" class="left" @click="changeClass(index)">
                        <div :class="index === currentClass? 'active' : ''" class="post-class-item">
                          {{ className }}
                        </div>
                      </li>
                      <div class="clear"></div>
                    </ul>
                  </div>
                  <div class="posting-choose">
                    <ul>
                      <li v-for="(chooseName, index) in chooseList" class="left" @click="changeChoose(index)">
                        <div :class="index === currentChoose? 'active' : ''" class="post-class-item">
                          {{ chooseName }}
                        </div>
                      </li>
                      <div class="clear"></div>
                    </ul>
                  </div>
                  <div class="clear"></div>
                </div>
                <div class="post-list">
                  <div v-if="hasForums">
                    <div>
                      <ul>
                        <li v-for="(post, index) in postList" class="post-item">
                          <div class="basic-box">
                            <div class="left portrait">
                              <img :src="post.us_headimg">
                            </div>
                            <div class="left">
                              <p class="name">
                                {{ post.us_nickname }}
                              </p>
                              <p class="time">
                                {{ post.time }}
                              </p>
                            </div>
                            <div class="left level">
                              Lv.6
                            </div>
                            <div v-if="post.fo_essence === '精华'" class="right quality">
                              精
                            </div>
                            <div v-if="post.fo_hot === '热门'" class="right quality">
                              热
                            </div>
                            <div v-if="post.fo_stick === '置顶'"  class="right stick">
                              <img src="../../../static/image/j_17.png">
                            </div>
                            <div class="clear"></div>
                          </div>
                          <div class="content">
                            <div @click="toDetail(post.fo_id, post.fo_title)" class="title">
                              <a href="javascript: void(0)">
                                {{ post.fo_title }}
                              </a>
                            </div>
                            <div class="img-box fo-content" v-html="post.fo_content">

                            </div>
                            <div class="reply-click">
                            <span>
                               回复: {{ post.fo_reply_number }}
                            </span>
                              <span>
                             点击: {{ post.fo_click_number }}
                          </span>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                    <div v-if="total !== 0" class="pager">
                      <Page @on-change="changePage" :total="total" :page-size="5"></Page>
                    </div>
                  </div>
                  <div v-else style="height: 400px;line-height: 400px;text-align: center;font-size: 20px;">
                    该地区下暂无{{ currentClass === -1? '帖子' : currentClass === 0? '精华帖' : currentClass === 1? '置顶贴' : currentClass === 2? '最新发布的帖子' : '帖子'}}
                  </div>
                </div>
              </div>
            </div>
            <div class="clear"></div>
          </div>
        </div>
      </div>
    </div>
    <div v-if="showCover" @mousewheel.prevent class="go-post-cover">
      <div class="cover-box">
        <div class="logo-box">
          <img src="../../../static/image/LOGO.png">
        </div>
        <div class="prompt-text">
          {{ coverText }}
        </div>
        <div @click="showCover = false" class="btn">
          OK
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Crumbs from '../Crumbs'
  import 'iview/dist/styles/iview.css'
  export default {
    name: 'Theme',
    components: {
      'Crumbs': Crumbs
    },
    data () {
      return {
        showCover: false,
        coverText: '先登录才能发帖子哦！',
        themeList: [],
        postList: [],
        currentTheme: 0,
        skey: '',
        total: 0,
        page: 0,
        essence: '',
        stick: '',
        order: '',
        currentClass: -1,
        classList: ['精华帖', '置顶贴', '最新发布'],
        hasForums: true,
        hasTheme: true,
        themeId: -1,
        themeImg: '',
        themeModerator: '',
        themeName: '',
        themeSign: '',
        // 发帖部分
        currentChoose: 0,
        chooseList: ['车友俱乐部', '本地售后俱乐部']
      }
    },
    methods: {
      // 发帖部分
      changeChoose: function (index) {
        let that = this
        that.currentChoose = index
      },
      // 更改帖子类型（精华帖、置顶贴...）
      changeClass: function (index) {
        let that = this
        that.page = 0
        if (that.currentClass === index) {
          that.currentClass = -1
          that.essence = ''
          that.order = ''
          that.stick = ''
          that.getPostList()
        } else {
          that.currentClass = index
          if (index === 0) {
            that.essence = '精华'
            that.stick = ''
            that.order = ''
          } else if (index === 1) {
            that.essence = ''
            that.stick = '置顶'
            that.order = ''
          } else if (index === 2) {
            that.essence = ''
            that.stick = ''
            that.order = '最新发布'
          }
          that.getPostList()
        }
      },
      // 更改主题
      changeTheme: function (index, themeName) {
        let that = this
        that.currentTheme = index
        let text = themeName + '论坛'
        that.themeId = that.themeList[index].ca_id
        that.themeImg = that.themeList[index].ca_image
        that.themeName = that.themeList[index].ca_name + '论坛'
        that.themeId = that.themeList[index].ca_id
        that.themeModerator = that.themeList[index].moderator_array
        that.themeSign = that.themeList[index].ca_sign
        that.page = 0
        that.total = 0
        that.essence = ''
        that.stick = ''
        that.order = ''
        that.currentClass = -1
        that.hasForums = true
        that.postList = []
        that.setCrumbs(text)
        that.getPostList()
      },
      setCrumbs: function (text) {
        let crumbs = []
        crumbs[0] = {
          title: '地区论坛',
          link: ''
        }
        crumbs[1] = {
          title: text,
          link: ''
        }
        this.$store.commit('crumbs', crumbs)
      },
      // 搜索主题
      searchTheme: function () {
        let that = this
        that.getThemeList()
      },
      // 更改页码
      changePage: function (e) {
        let that = this
        let page = e - 1
        if (that.page === page) {
          return false
        }
        that.page = page
        that.getPostList()
        let $ = require('jquery')
        $('html,body').animate({
          scrollTop: 600
        }, 200)
      },
      // 获取主题列表
      getThemeList: function () {
        let that = this
        let skey = that.skey
        that.$chaos.ajax({
          url: '/Forum/getForumCateList',
          data: {
            type: '地区',
            skey: skey
          },
          callback: function (type, res) {
            if (type === 'success') {
              let list = res.result.list
              that.themeList = list
              if (that.themeList.length === 0) {
                that.hasTheme = false
                return false
              }
              that.hasTheme = true
              that.currentTheme = 0
              that.setCrumbs(that.themeList[that.currentTheme].ca_name + '论坛')
              that.themeImg = that.themeList[that.currentTheme].ca_image
              that.themeName = that.themeList[that.currentTheme].ca_name + '论坛'
              that.themeId = that.themeList[that.currentTheme].ca_id
              that.themeModerator = that.themeList[that.currentTheme].moderator_array
              that.themeSign = that.themeList[that.currentTheme].ca_sign
              that.getPostList()
              let $ = require('jquery')
              if (list.length > 14) {
                let num = (list.length - 14) * 70 + 500 + 'px'
                $('.post-list').css('min-height', num)
              }
            }
          }
        })
      },
      getPostList: function () {
        let that = this
        let page = that.page
        let essence = that.essence
        let stick = that.stick
        let order = that.order
        that.$chaos.ajax({
          url: '/Forum/getForumList',
          data: {
            type: '地区',
            region_id: that.themeId,
            page: page,
            limit: 5,
            essence: essence,
            stick: stick,
            order: order
          },
          callback: function (type, res) {
            if (type === 'success') {
              for (let i in res.result.list) {
                let time = new Date(res.result.list[i].time)
                let year = time.getFullYear()
                let month = that.addZone(time.getMonth() + 1)
                let day = that.addZone(time.getDate())
                res.result.list[i].time = year + '-' + month + '-' + day
              }
              that.postList = res.result.list
              if (that.postList.length === 0) {
                that.hasForums = false
                return false
              }
              that.hasForums = true
              if (page === 0 && res.result.count !== 0) {
                that.total = parseInt(res.result.count)
              }
            }
          }
        })
      },
      // 去发帖
      toPosting: function () {
        let that = this
        if (!that.$chaos.getAccessToken()) {
          that.showCover = true
          return false
        }
        let themeId = that.themeId
        let label = ''
        if (that.currentChoose === 0) {
          label = '车友俱乐部'
        } else if (that.currentChoose === 1) {
          label = '本地售后俱乐部'
        }
        that.$router.push('/Forums/release?type=地区&theme_id=' + themeId + '&label=' + label)
      },
      // 查看帖子详情
      toDetail: function (id, title) {
        let that = this
        that.$router.push('/Forums/postDetail?type=地区论坛&foId=' + id + '&title=' + title)
      },
      // 小于10加0
      addZone: function (num) {
        if (num < 10) {
          num = '0' + num
        }
        return num
      },
      verify: function () {
        let that = this
        that.getThemeList()
      }
    },
    created () {
      this.verify()
    }
    // activated: function () {
    //   this.verify()
    // }
  }
</script>
